<template>
	<view class="category">
		<search></search>
		<view class="content">
			<view class="left-f">


				<view class="left">
					<view class="item" :class="{active:currentIndex===index}" v-for="(item,index) in 100" :key="index" @click="currentIndex=index">内容</view>
				</view>
			</view>
			<view class="right"></view>
		</view>
	</view>
</template>

<script>
	import search from "../../cpmponents/search.vue"
	export default {
		// 注册组件

		components: {
			search
		},
		data() {
			return {
				currentIndex: 0
			}
		}
	}
</script>

<style lang="less">
	.category {
		.content {
			display: flex;
			position: fixed;
			bottom: 0;
			left: 0;
			top: 130rpx;
			right: 0;
			// width:100%;
			// height:100%;
			// background-color: pink;
			


			.left-f {
				overflow: auto;

				.left {
					width: 200rpx;
					
					

					.item {
						width: 100%;
						height: 100rpx;
						line-height: 100rpx;
						text-align: center;
						background-color: #f4f4f4;
						border-bottom: 1px solid #eee;

						&.active {
							background-color: #ffffff;
							color: red;
							position: relative;

							&:before {
								content: "";
								position: absolute;
								left: 0;
								top: 50%;
								transform: translateY(-50%);
								width: 8rpx;
								height: 60rpx;
								background-color: red;
							
							}
						}
					}

				}
			}

			.right {
				flex: 1;
			
			}
		}
	}
</style>
